import react, {Component, PropTypes} from 'react';
import Radium from 'radium';

const styles = {
    base: {
        border: '1px solid #FF0000',
        borderRadius: '5px',
        height: '45px'
    },
    back: {

    }
}


class Header extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            title: props.title,
            hasBack: props.hasBack
        };

        this.doBack = this.doBack.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.title !== this.props.title) {
            this.setState({ title: nextProps.title });
        }
    }

    doBack(){
        window.history.back();
    }

    renderBackButton() {
        if(this.state.hasBack) {
            return (
                <a onClick={this.doBack} style={style.button}>返回</a>
            )
        }
    }

    render() {
        let backBtn;
        if(this.state.hasBack){
            backBtn = <a onClick={this.doBack} style={style.button}>返回</a>
        }

        return <header style={style.base}>
            {this.backBtn}
            <h1>{this.props.title}</h1>
        </header>
    }
};

Header.propTypes = {
    title: react.PropTypes.string,
    hasBack: react.PropTypes.bool
};

export default Header;
